<template>
  <div>
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form :inline="true" :model="userVO">
        <el-form-item label="部门" label-width="70px">
          <el-select clearable v-model="userVO.departmentId" placeholder="请选择">
            <el-option
              v-for="item in department"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.deptCount }}</span>
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" label-width="70px">
          <el-input clearable v-model="userVO.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="70px">
          <el-input clearable v-model="userVO.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="70px" style="margin-left: 25px">
          <el-radio v-model="userVO.sex" label="0">男</el-radio>
          <el-radio v-model="userVO.sex" label="1">女</el-radio>
          <el-radio v-model="userVO.sex" label>全部</el-radio>
        </el-form-item>
        <el-form-item label="昵称" label-width="70px">
          <el-input clearable v-model="userVO.nickname" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item style="margin-left:50px;">
          <el-button @click="resetUserVO" icon="el-icon-refresh">重置</el-button>
          <el-button type="primary" @click="getUserList" icon="el-icon-search">查询</el-button>
          <el-button type="success" icon="el-icon-plus" @click="addUser">添加</el-button>
          <el-button  icon="el-icon-download" type="warning" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
      <!--表格-->
      <el-table :data="userList" border max-height="390px" style="width: 100%;">
        <el-table-column prop="id" label="#" width="50"></el-table-column>
        <el-table-column prop="username" label="用户名" width="110"></el-table-column>
        <el-table-column prop="sex" label="性别" width="60">
          <template slot-scope="scope"><span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{scope.row.sex == 0? '男' : (scope.row.sex==1?'女':'保密')}}</span></template>
        </el-table-column>
        <el-table-column sortable prop="name" label="所属部门" width="180"></el-table-column>
        <el-table-column sortable prop="birth" label="生日" width="180"></el-table-column>
        <el-table-column sortable prop="email" label="邮箱" width="180"></el-table-column>
        <el-table-column sortable prop="phoneNumber" label="电话" width="150"></el-table-column>
        <el-table-column prop="status" label="是否禁用" width="150">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status == 1"
              active-color="#13ce66"
              inactive-color="#808080"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index,scope.row)" ></el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.$index,scope.row)"></el-button>
          <el-button type="warning" size="mini" icon="el-icon-s-tools"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top:10px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 10, 20, 30]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="500"
      ></el-pagination>
    </el-card>
    <UserAdd :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate" ref="addOrUpdateRef" :department="department"></UserAdd>
    <edit-user :updateVisible="updateVisible" @changeUpdateShow="choseEditBtn" ref="showdateRef" :department="department" :editForm="editForm"></edit-user>
    <DeleteUser :deleteVisible="deleteVisible" @changDeleteShow="choseDeleteBtn" ref="showdeleteRef" :userId = "userId"></DeleteUser>
  </div>
</template>
<script>
import { findUserList, exportUserInfo,editUser,deleteUser} from "@/api/users.js";
import { findDeptAndCount } from "@/api/dept.js";

import UserAdd from './AddUser.vue';
import EditUser from './EditUser';
import DeleteUser from '@/views/user/DeleteUser'

export default {
  name: "Users",
  components : {
    UserAdd,EditUser,DeleteUser
  },
  data() {
    return {
      userVO: {
        departmentId: "",
        email: "",
        city: "",
        sex: "1",
        nickname: "",
      },
      // 控制新增编辑弹窗的显示与隐藏
      addOrUpdateVisible: false,
      updateVisible: false,
      deleteVisible: false,
      //用户集合
      userList: [],
      //部门集合
      deptList: [],
      //页大小
      size: 6,
      //总条数
      total: 100,
      //当前页码
      current: 1,
      department: [],
      //用户id
      userId: 0,
      //编辑对象
      editForm : {},
      
    };
  },
  created() {
    this.getUserList();
    this.getDeptAndCount();
  },
 
  methods: {
    //修改通信值
    choseDeleteBtn(flag){
      this.deleteVisible = flag
    },
    choseEditBtn(flag){
      this.updateVisible = flag;
    },
    choseAddBtn(flag){
      this.addOrUpdateVisible = flag;
    },
    handleDelete(index,row){
      this.userId = row.id
      this.deleteUser()
    }
    ,
    handleEdit(index,row){
      this.edit(row.id)
    },
    onSubmit() {
      console.log("submit!");
    },
    handleSizeChange(val) {
      this.size = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getUserList();
    },
    async getUserList() {
      const { data } = await findUserList(this.current, this.size, this.userVO);
      console.log(data);
      this.userList = data.records;
      this.total = data.total;
    },
    async getDeptAndCount() {
      const { data } = await findDeptAndCount();
      this.department = data.department;
    },
    resetUserVO(){
       this.userVO.username = ''
       this.userVO.departmentId = ''
       this.userVO.email = ''
       this.userVO.nickname = ''
       this.userVO.sex = ''
       this.getUserList()
    },
    // 按钮点击事件 显示新增编辑弹窗组件
    addUser(){
      this.addOrUpdateVisible = true
    },
    editUser(){
      this.updateVisible = true
    },
    deleteUser(){
      this.deleteVisible = true
    },
    // 监听 子组件弹窗关闭后触发，有子组件调用
    showAddOrUpdate(data){
      if(data === 'false'){
        this.addOrUpdateVisible = false
      }else{
        this.addOrUpdateVisible = true
      }
    },
    showUpdate(data){
      if(data == 'false'){
        this.updateVisible = false
      }else{
        this.updateVisible = true
      }
    },
    //导出excel
    async exportExcel(){
      exportUserInfo(this.userVO).then(res =>{
        //这里没有返回数据，但是要在响应头中进行下载操作
        //将二进制文件转化为可访问的url
        let url = window.URL.createObjectURL(new Blob([res.data]));
        //创建一个a标签的超链接
        var a = document.createElement("a");
        //将a标签添加到body内容中
        document.body.appendChild(a);
        a.href = url;
        a.download = "用户列表.xls"
        a.click();
        window.URL.revokeObjectURL(url);
      }).catch(err =>{
        this.$notify.fail({
            title: '操作失败',
            message : '导出excel失败',
          })
      })
    },
    async edit(id){
      
      const {data : res} = await editUser(id);
      //console.log(res)
      if(res.code == 200){
        this.editForm = res.data.uservo;
        this.editUser()
        //this.updateVisible = true;
      }else{
        return this.$message.error("用户编辑失败" + res.message);
      }
    }
    
  },
};
</script>

<style scoped>
</style>